import React, { useEffect, useRef, useState } from 'react';
import { connect, history } from 'umi';
import { Alert, Button, Space, Tag, Modal, notification, Row, Col, Checkbox } from 'antd'
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
import SearchCondition from '@/components/SearchCondition';
const PromoterList = (props) => {
    const { loading, dispatch, list, parentId } = props;
    const { location } = history
    const { query } = location
    const { accessId } = query
    const childRef = useRef();
    const [visible, setVisible] = useState(false);
    const [codeVisible, setCodeVisible] = useState(false)
    const [promoterLevelList, setPromoterLevelList] = useState([])
    const [levelVisible, setLevelVisible] = useState(false)
    const [shareVisible, setShareVisible] = useState(false)
    const [params, setSearchParams] = useState({})
    const [selectedRow, setSelectedRow] = useState({
        selectedRowKeys: [],
        type: 'checked',
        preserveSelectedRowKeys: true,
        onChange: (val, selectedRows) => {
            setSelectedRow({
                ...selectedRow,
                selectedRowKeys: val,
                rowKeyList: selectedRows
            });
        },

    });
    const fetchUrl = () => {
        dispatch({
            type: 'promoter/fetchActivityUrl',
            callback: (e) => {
                const { activityUrl } = e
                setCodeVisible({
                    show: true,
                    detail: {
                        url: activityUrl
                    }
                })
            }
        })
    }
    const fetchLevelList = () => {
        dispatch({
            type: 'promoter/fetchPromoterSimpleLevelDetail',
            callback: (e) => {
                const { promoterLevelList } = e
                setPromoterLevelList(promoterLevelList)
            }
        })
    }
    useEffect(() => { handleCallback() }, [params])
    useEffect(() => {
        fetchLevelList()
    }, [])
    // 搜索参数
    const searchItems = [
        {
            label: '级别',
            name: 'id',
            type: 'select',
            select: promoterLevelList,
            fieldNames: { label: 'levelName', value: 'id' },
        },
        {
            label: '邀请人',
            name: 'shareKeyword',
        },
        {
            label: '申请人',
            name: 'keyword',
            placeholder: "请输入申请人姓名/手机号"
        },
        {
            label: '申请时间',
            type: 'rangePicker',
            name: 'createStartTime',
            end: 'createEndTime',
        },
        {
            label: '状态',
            name: 'status',
            type: 'select',
            select: {
                0: '禁用',
                1: '启用'
            },

        },
    ];

    // table 表头
    const getColumns = [
        {
            title: '申请姓名 ',

            dataIndex: 'applyUsername',
        },
        {
            title: '申请手机号 ',

            dataIndex: 'applyMobile',
        },

        {
            title: '等级',

            dataIndex: 'levelName',
        },

        // {
        //     title: '所属团队',

        //     dataIndex: 'planDesc',
        // },

        {
            title: '邀请人',

            dataIndex: 'parentUsername',
        },
        {
            title: '累计客户（人）',

            dataIndex: 'inviteUserAmount',
        },
        {
            title: '累计邀请推广员（人）',

            dataIndex: 'invitePromoterAmount',
        },
        {
            title: '已结算收益（元）',

            dataIndex: 'settledCommission',
        },
        {
            title: '待结算收益(元)',

            dataIndex: 'toSettledCommission',
        },
        {
            title: '银行卡号',
            dataIndex: 'bankCard',
        },
        {
            title: '银行名称',
            dataIndex: 'bankName',
        },
        {
            title: ' 银行户名',
            dataIndex: 'bankAccount',
        },
        {
            title: '加入时间',
            dataIndex: 'createTime',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (e) => {
                return { 0: '禁用', 1: '启用' }[e]
            }
        },
    ];
    const handleCallback = () => {
        childRef.current.fetchGetData();
    };
    const handleSaveRole = (detail = {}) => {
        setVisible({
            show: true,
            detail,
        });
    };


    return (

        <div>
            <Row gutter={[36, 12]}>
                <Col span={24}>
                    <div style={{ background: '#f5f5f5', padding: 24 }}>
                        <SearchCondition
                            handleSearch={(e) => {
                                setSearchParams(e);
                            }}
                            searchItems={searchItems}
                        ></SearchCondition>
                    </div>
                </Col>
                <Col span={24}>
                    <TableDataBlock
                        cRef={childRef}
                        loading={loading}
                        params={{
                            ...params,
                            parentId
                        }}
                        firstFetch={false}
                        columns={getColumns}
                        rowKey={(record) => `${record.id}`}
                        dispatchType="promoter/fetchListPromoter"
                        {...list}
                    ></TableDataBlock>
                </Col>
            </Row>
        </div>
    );
};

export default connect(({ promoter, loading }) => ({
    list: promoter.promoterList,
    loading: loading.models.promoter,
}))(PromoterList);
